<template>
  <div>
    <a-modal
      :title="$t('Import-Block')"
      v-model="importVisible"
      width='30%'
      @ok='handleImport'
      @cancel="handleCancel"
      :maskClosable="false"
      v-dragModal
    >
      <a-form :form="form">
        <a-form-item :label="$t('File-address')" v-bind="formLayout" has-feedback>
          <a-input v-decorator="['file_address',{
              rules:[
                {required:true,message:$t('Enter')+$t('File-address')},
                // {pattern:namePattern,message:$t('Not_enter_special_characters')}
              ]
          }]" 
          :placeholder="$t('Enter')+$t('File-address')"
          allowClear>
          </a-input>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button @click="handleReset" class="submit-btn">
          {{$t('Reset')}}
        </a-button>
        <a-button
          class="submit-btn"
          type="primary"
          @click="handleImport"
          :loading="submitLoading"
        >
          {{$t('Sure')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "ImportBlock",
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      importVisible: false,
      form: this.$form.createForm(this),
      formLayout:{
        labelCol: {span: 6},
        wrapperCol: {span: 17}
      },
      submitLoading: false
    }
  },

  watch: {
    visible(newValue) {
      this.importVisible = newValue;
    }
  },

  methods: {
    //导入
    handleImport() {
      this.form.validateFields((err,value)=>{
        if(!err){
          this.submitLoading = true;
        }
      })
    },

    //关闭导入弹窗
    handleCancel() {
      this.$emit('closeImport');
      this.form.resetFields(); //重置弹窗
    },

    //重置操作
    handleReset() {
      this.form.resetFields(); //重置弹窗
    },
  },
}
</script>
<style scoped>
  .submit-btn {
    width: 70px;
  }
</style>